<script setup lang="ts">
import type { Message, Prescription } from '@/types/room'
import type { Image } from '@/types/consult'
import { MsgType, IllnessTime, PrescriptionStatus } from '@/enums'
import { showFailToast, showImagePreview } from "vant";
import { useUserStore } from '@/stores/user';
import dayjs from "dayjs";
import { getPrescriptionPicAPI } from '@/services/consult'
import EvaluateCard from './EvaluateCard.vue'
import { useRouter } from 'vue-router';
const router = useRouter()

const formatTime = (time: string) => dayjs(time).format("HH:mm");
const store = useUserStore()

const onPreview = (pics?: Image[]) => {
  if (!pics || !pics.length) return
  const urls = pics.map((item) => item.url)
  showImagePreview(urls)
}

// 数据数字=>中文转换函数
const timeOptions = [
  { label: '一周内', value: IllnessTime.Week },
  { label: '一月内', value: IllnessTime.Month },
  { label: '半年内', value: IllnessTime.HalfYear },
  { label: '大于半年', value: IllnessTime.More }
]
const flagOptions = [
  { label: '就诊过', value: 0 },
  { label: '没就诊过', value: 1 }
]

const getIllnessTimeText = (time: IllnessTime) => {
  return timeOptions.find((item) => item.value === time)?.label
}

const getConsultFlagText = (flag: 0 | 1) => {
  return flagOptions.find((item) => item.value === flag)?.label
}


defineProps<{
  list: Message[]
}>()

// 显示处方
const showPrePic = async (id: string) => {
  const { data } = await getPrescriptionPicAPI(id)
  console.log(data);
  showImagePreview([data.url])

}

// 购买药品
const onBuy = (item: Prescription) => {
  // 三种情况
  // 1. 时间过久, 已经失效
  if(item.status === PrescriptionStatus.Invalid) return showFailToast('处方已经失效')
  if(item.status === PrescriptionStatus.Payment) return router.push(`/order/${item.orderId}`);
  if(item.status === PrescriptionStatus.NotPayment) return router.push(`/order/pay?id=${item.id}`);
}
</script>

<template>
  <div>
    <div v-for="{ msgType, msg, from, createTime, id, fromAvatar } in list" :key="id">
      <!-- 这里是遍历出来的消息记录 -->
      <!-- 但是因为消息记录有很多种 -->
      <!-- 会用 v-if 进行判断, 是什么 msgType 就显示什么类型的消息记录 -->
      <div class="msg msg-illness" v-if="msgType === MsgType.CardPat">
        <div class="patient van-hairline--bottom" v-if="msg.consultRecord">
          <p>
            {{ msg.consultRecord?.patientInfo.name }} {{
              msg.consultRecord?.patientInfo.genderValue }} {{
    msg.consultRecord?.patientInfo.age }}岁
          </p>
          <p>
            {{ getIllnessTimeText(msg.consultRecord!.illnessTime) }} | {{
              getConsultFlagText(msg.consultRecord!.consultFlag) }}
          </p>
        </div>
        <van-row>
          <van-col span="6">病情描述</van-col>
          <van-col span="18">{{ msg.consultRecord?.illnessDesc }}</van-col>
          <van-col span="6">图片</van-col>
          <!-- <van-col span="18"> -->
          <van-col span="18" @click="onPreview(msg.consultRecord?.pictures)">
            点击查看
          </van-col>
        </van-row>
      </div>
      <!-- 温馨提示 -->
      <div class="msg msg-tip" v-if="msgType === MsgType.NotifyTip">
        <div class="content">
          <span class="green">温馨提示：</span>
          <span>{{ msg.content }}</span>
        </div>
      </div>
      <!-- 通用通知 -->
      <div class="msg msg-tip" v-if="msgType === MsgType.Notify">
        <div class="content">
          <span>{{ msg.content }}</span>
        </div>
      </div>

      <!-- 文字消息 -->
      <!-- 我发的消息 -->
      <div class="msg msg-to" v-if="msgType === MsgType.MsgText && store.user?.id === from">
        <div class="content">
          <div class="time">{{ formatTime(createTime) }}</div>
          <div class="pao">{{ msg.content }}</div>
        </div>
        <van-image :src="store.user?.avatar" />
      </div>

      <!-- 医生发的消息 -->
      <div class="msg msg-from" v-if="msgType === MsgType.MsgText && store.user?.id !== from">
        <van-image :src="fromAvatar" />
        <div class="content">
          <div class="time">{{ formatTime(createTime) }}</div>
          <div class="pao">{{ msg.content }}</div>
        </div>
      </div>

      <!-- 图片消息 -->
      <!-- 发消息-图片 -->
      <div class="msg msg-to" v-if="msgType === MsgType.MsgImage && store.user?.id === from">
        <div class="content">
          <div class="time">{{ formatTime(createTime) }}</div>
          <van-image fit="contain" :src="msg.picture?.url" />
        </div>
        <van-image :src="store.user?.avatar" />
      </div>

      <!-- 收消息-图片 -->
      <div class="msg msg-from" v-if="msgType === MsgType.MsgImage && store.user?.id !== from">
        <van-image :src="fromAvatar" />
        <div class="content">
          <div class="time">{{ formatTime(createTime) }}</div>
          <van-image fit="contain" :src="msg.picture?.url" />
        </div>
      </div>

      <!-- 处方 -->
      <div class="msg msg-recipe" v-if="msgType === MsgType.CardPre">
        <div class="content" v-if="msg.prescription">
          <div class="head van-hairline--bottom">
            <div class="head-tit">
              <h3>电子处方</h3>
              <p @click="showPrePic(msg.prescription.id)">
                原始处方 <van-icon name="arrow"></van-icon>
              </p>
            </div>
            <p>
              {{ msg.prescription.name }} {{ msg.prescription.genderValue }} {{
                msg.prescription.age }}岁 {{ msg.prescription.diagnosis }}
            </p>
            <p>开方时间：{{ msg.prescription.createTime }}</p>
          </div>
          <div class="body">
            <div class="body-item" v-for="med in msg.prescription.medicines" :key="med.id">
              <div class="drug">
                <p>{{ med.name }} {{ med.specs }}</p>
                <p>{{ med.usageDosag }}</p>
              </div>
              <div class="num">x{{ med.quantity }}</div>
            </div>
          </div>
          <div class="foot" @click="onBuy(msg.prescription!)">
            <span>购买药品</span>
          </div>
        </div>
      </div>

      <!-- 结束问诊 -->
      <div class="msg msg-tip msg-tip-cancel" v-if="msgType === MsgType.NotifyCancel">
        <div class="content">
          <span>{{ msg.content }}</span>
        </div>
      </div>

      <!-- 评价卡片 -->
      <!-- 这里不会直接写, 因为功能太复杂, 会再次进行封装 -->
      <div class="msg msg-comment" v-if="msgType === MsgType.CardEva || msgType === MsgType.CardEvaForm">
        <EvaluateCard :evaluateDoc="msg.evaluateDoc" />
      </div>

    </div>
  </div>
</template>
  
<style lang="scss"></style>